<template>
  <div class="home_recommend">
    <div class="title">
      <span>瞬时推荐</span>
    </div>
    <div class="list">
      <RecommendListItem
        v-for="item in newTodayList"
        :foodItem="item"
        :key="item.menu_id"
      />
    </div>
    <!--空状态-->
    <div v-if="newTodayList.length <= 0">
      <van-empty description="已过饭点~" />
    </div>
  </div>
</template>

<script>
import RecommendListItem from "./RecommendListItem";
import { ref, watchEffect } from "vue";
import { getOrdering } from "../../../api/ordering";
export default {
  name: "HomeRecommend",
  components: { RecommendListItem },
  setup() {
    //数据
    const todayList = ref([]);
    const newTodayList = ref(); //代理数据集
    //时间点
    const time = new Date().getHours();
    // console.log(time);
    getOrdering().then((res) => {
      // console.log(res);
      todayList.value = res.data;
      // newTodayList.value = todayList.value;
    });
    //根据时间点推出菜品类型（早中晚）
    watchEffect(() => {
      if (6 <= time && time <= 7) {
        newTodayList.value = todayList.value.filter(
          (item) => item.menu_type == "早"
        );
      } else if (11 <= time && time <= 13) {
        newTodayList.value = todayList.value.filter(
          (item) => item.menu_type == "中"
        );
      } else if (18 <= time && time <= 19) {
        newTodayList.value = todayList.value.filter(
          (item) => item.menu_type == "晚"
        );
      } else {
        newTodayList.value = [];
      }
    });
    return { newTodayList };
  },
};
</script>

<style scoped lang="less">
.home_recommend {
  //border: 1px solid;
  width: 95%;
  margin: 0 auto;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 0.4rem;
  overflow: hidden;
  box-sizing: border-box;
  .title {
    width: 100%;
    padding: 0.5rem 0;
    span {
      border-bottom: 2px solid #ff8917;
      padding: 0.2rem 0.3rem;
      font-size: 1.1rem;
      color: #848c9d;
    }
  }
}
</style>
